<template>
  <a-modal
    title="物流设置"
    :visible="logiConfigVisible"
    @ok="handleOk"
    @cancel="handleCancel"
    width="45%"
  >
    <template slot="footer" class="modelBtn">
      <a-button @click="handleCancel">取消</a-button>
      <!-- <a-button :loading="loading" @click="handleOk" type="primary"
        >确认</a-button
      > -->
    </template>
    <a-spin tip="Loading..." :spinning="spinning">
      <a-table
        size="small"
        bordered
        :data-source="platData"
        :pagination="false"
      >
        <!-- getCheckboxProps -->
        <a-table-column
          key="sysStoreHouseLogisticsId"
          data-index="sysStoreHouseLogisticsId"
          align="center"
          width="10%"
        >
          <span slot="title"></span>
          <template slot-scope="text, record">
            <a-checkbox
              @click="e => onSelectChange(e, record)"
              :checked="
                record.sysStoreHouseLogisticsId != null &&
                  record.isDisable * 1 == 0
              "
            ></a-checkbox>
          </template>
        </a-table-column>
        <a-table-column
          key="logisticsPlatform"
          data-index="logisticsPlatform"
          align="center"
          width="60%"
        >
          <span slot="title">物流平台名称</span>
          <template slot-scope="text, record">
            {{ record.logisticsPlatform }}
          </template>
        </a-table-column>
        <!-- 操作 -->
        <a-table-column key="operation" data-index="operation" align="center">
          <span slot="title">操作</span>
          <template slot-scope="text, record">
            <a
              href="javascript:;"
              @click="serviceConfig(record)"
              v-if="
                record.sysStoreHouseLogisticsId != null && record.isDisable == 0
              "
              style="color:#0000ff;border-bottom:1px solid #0000ff;"
              >物流商配置</a
            >
          </template>
        </a-table-column>
      </a-table>
      <!-- 分页器 -->
      <div style="margin: 20px 0; text-align: center">
        <a-config-provider>
          <a-pagination
            show-size-changer
            :pageSizeOptions="['10', '20', '30']"
            :show-total="
              total => `${$t('m.page.Total')} ${total} ${$t('m.page.items')}`
            "
            @showSizeChange="showChange"
            :buildOptionText="
              props => ` ${props.value} ${$t('m.page.a')}/${$t('m.page.page')}`
            "
            show-quick-jumper
            :default-current="searchPlatData.current * 1"
            :total="total * 1"
            @change="onChangePage"
          />
        </a-config-provider>
      </div>
    </a-spin>
    <a-modal
      title="物流商设置"
      :visible="logiproVisible"
      @ok="handleOk"
      @cancel="handleCancel2"
      width="40%"
    >
      <template slot="footer" class="modelBtn">
        <a-button @click="handleCancel2">取消</a-button>
        <!-- <a-button :loading="loading" @click="handleOk" type="primary"
          >确认</a-button
        > -->
      </template>
      <div>
        <a-form-model
          ref="ruleForm"
          :model="formData"
          :rules="formDataRules"
          class="fromData"
        >
          <a-form-model-item>
            <a-select
              show-search
              option-filter-prop="children"
              v-model="formData.sysLogisticsServiceItemId"
              allowClear
              size="small"
              placeholder="请选择物流商"
            >
              <a-select-option
                :value="item.sysLogisticsServiceItemId"
                v-for="item in stsItms"
                :key="item.sysLogisticsServiceItemId"
              >
                {{ item.serviceName }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item>
            <a-button type="primary" size="small" @click="addNotpro"
              >添加</a-button
            >
          </a-form-model-item>
        </a-form-model>
        <a-spin tip="Loading..." :spinning="spinning">
          <a-table
            :data-source="providersData"
            bordered
            :pagination="false"
            :scroll="{ y: 300 }"
          >
            <a-table-column
              key="serviceName"
              data-index="serviceName"
              align="center"
              width="25%"
            >
              <span slot="title"> 物流商</span>
              <template slot-scope="text, record">
                {{ record.serviceName }}
              </template>
            </a-table-column>
            <a-table-column
              key="isEnable"
              data-index="isEnable"
              align="center"
              width="18%"
            >
              <span slot="title"> 是否启用</span>
              <template slot-scope="text, record">
                <a-checkbox
                  style="margin-bottom:10px;"
                  :checked="record.isEnableInquiry == 0"
                  @change="e => onChangeIsEnableInquiry(e, record)"
                >
                  启用询价
                </a-checkbox>
                <br />
                <a-checkbox
                  :checked="record.isEnablePrint == 0"
                  @change="e => onChangeIsEnablePrint(e, record)"
                >
                  启用打单
                </a-checkbox>
              </template>
            </a-table-column>
            <a-table-column
              key="wayList"
              class="way-list"
              data-index="wayList"
              align="center"
              width="25%"
            >
              <span slot="title"> 物流服务方式</span>
              <template slot-scope="text, record">
                <div v-for="(item, index) in record.wayList" :key="index">
                  <a-checkbox
                    style="margin-bottom:10px;"
                    :checked="item.isDisable == 0"
                    @change="e => changeListEnable(e, item)"
                  >
                    {{ item.wayName }}
                  </a-checkbox>
                </div>
              </template>
            </a-table-column>
            <a-table-column
              key="action"
              data-index="action"
              align="center"
              width="25%"
            >
              <span slot="title">操作</span>
              <template slot-scope="text, record">
                <a
                  slot="action"
                  href="javascript:;"
                  style="color:#0000ff;border-bottom:1px solid #0000ff;"
                  @click="addservice(record)"
                  >添加物流服务方式</a
                >
              </template>
            </a-table-column>
          </a-table>
        </a-spin>
      </div>
      <a-modal v-model="service" title="添加服务方式">
        <template slot="footer" class="modelBtn">
          <a-button
            @click="handleCancel3"
            style="background: #d7d7d7; color: #fff; border: none"
            >取消</a-button
          >
          <a-button
            :loading="loading"
            type="primary"
            @click="handleOk('addser')"
            >确认</a-button
          >
        </template>
        <div v-if="plainOptions.length == 0">暂无数据</div>
        <a-checkbox
          v-else
          v-for="(item, index) in plainOptions"
          :key="index"
          @change="e => onChangeservice(e, item)"
        >
          {{ item.wayName }}
        </a-checkbox>
      </a-modal>
    </a-modal>
  </a-modal>
</template>

<script>
import {
  con_searchPlat,
  con_logiAddPlat,
  con_searchNotProList,
  con_searchYesProList,
  con_addProList,
  con_editProList,
  con_editSerProList,
  con_searchSerList,
  con_addSerProWay
} from "@/apis/system/setManage/setWarehouse";
export default {
  data() {
    return {
      //添加服务方式需要的参数
      addWayData: {
        sysLogisticsServiceItemId: "",
        sysLogisticsId: "",
        sysStoreHouseLogisticsServiceItemId: ""
      },
      //已添加物流商的数据
      providersData: [],
      formDataRules: {},
      //物流商下拉框数据
      stsItms: [],
      plainOptions: [],
      //下拉的数据
      formData: {
        sysLogisticsServiceItemId: undefined,
        sysLogisticsId: undefined
      },
      spinning: false,
      //控制物流商设置
      logiproVisible: false,
      //控制物流配置得模态框
      logiConfigVisible: false,
      service: false,
      loading: false,
      //表格得数组
      platData: [],
      searchPlatData: {
        size: 1,
        current: 10
      },
      total: 5,
      services: []
    };
  },
  mounted() {
    this.$bus.$off("logiConfig");
    this.$bus.$on("logiConfig", record => {
      this.searchPlatData = Object.assign(this.searchPlatData, record);
      this.getPlatTabList();
    });
  },
  methods: {
    addservice(record) {
      this.addWayData.sysLogisticsServiceItemId =
        record.sysLogisticsServiceItemId;
      this.addWayData.sysLogisticsId = record.sysLogisticsId;
      this.addWayData.sysStoreHouseLogisticsServiceItemId =
        record.sysStoreHouseLogisticsServiceItemId;
      this.serchNotSerList(record.sysLogisticsServiceItemId);
      this.service = true;
    },
    //查询未添加的服务方式
    async serchNotSerList(id) {
      let res = await con_searchSerList(
        this.searchPlatData.sysStoreHouseId,
        id
      );
      if (res.code == "200") {
        this.plainOptions = res.responseBody;
      }
      // this.plainOptions.forEach(item => {
      //   item.sysStoreHouseLogisticsServiceItemId = id;
      // });
    },
    //新增物流服务
    onChangeservice(e, item) {
      if (e.target.checked) {
        this.services.push({
          sysLogisticsServiceItemId: this.addWayData.sysLogisticsServiceItemId,
          sysLogisticsServiceWayId: item.sysLogisticsServiceWayId
        });
      } else {
        this.services.forEach((val, index) => {
          if (val.sysLogisticsServiceWayId == item.sysLogisticsServiceWayId) {
            this.services.splice(index, 1);
          }
        });
      }
    },
    //及时修改物流服务的方法
    async changeListEnable(e, record) {
      if (e.target.checked) {
        record.isDisable = "0";
        let res = await con_editSerProList(
          this.searchPlatData.sysStoreHouseId,
          this.formData.sysLogisticsId,
          record.sysStoreHouseLogisticsServiceWayId,
          { isDisable: 0 }
        );
        if (res.code == "10000") {
          this.getNotProList(this.formData);
          this.getYesProList(this.formData);
        }
      } else {
        record.isDisable = "1";
        let res = await con_editSerProList(
          this.searchPlatData.sysStoreHouseId,
          this.formData.sysLogisticsId,
          record.sysStoreHouseLogisticsServiceWayId,
          { isDisable: 1 }
        );
        if (res.code == "10000") {
          this.getNotProList(this.formData);
          this.getYesProList(this.formData);
        }
      }
    },
    //新增时是否启用询价
    async onChangeIsEnableInquiry(e, record) {
      if (e.target.checked) {
        record.isEnableInquiry = 0;
        let res = await con_editProList(
          this.searchPlatData.sysStoreHouseId,
          this.formData.sysLogisticsId,
          record.sysStoreHouseLogisticsServiceItemId,
          {
            isEnableInquiry: "0"
          }
        );
        if (res.code == "10000") {
          this.getNotProList(this.formData);
          this.getYesProList(this.formData);
        } else {
          return false;
        }
      } else {
        record.isEnableInquiry = 1;
        let res = await con_editProList(
          this.searchPlatData.sysStoreHouseId,
          this.formData.sysLogisticsId,
          record.sysStoreHouseLogisticsServiceItemId,
          {
            isEnableInquiry: "1"
          }
        );
        if (res.code == "10000") {
          this.getNotProList(this.formData);
          this.getYesProList(this.formData);
        } else {
          return false;
        }
      }
    },
    //新增时是否启用打单
    async onChangeIsEnablePrint(e, record) {
      if (e.target.checked) {
        record.isEnablePrint = 0;
        let res = await con_editProList(
          this.searchPlatData.sysStoreHouseId,
          this.formData.sysLogisticsId,
          record.sysStoreHouseLogisticsServiceItemId,
          {
            isEnablePrint: "0"
          }
        );
        if (res.code == "10000") {
          this.getNotProList(this.formData);
          this.getYesProList(this.formData);
        } else {
          return false;
        }
      } else {
        record.isEnablePrint = 1;
        let res = await con_editProList(
          this.searchPlatData.sysStoreHouseId,
          this.formData.sysLogisticsId,
          record.sysStoreHouseLogisticsServiceItemId,
          {
            isEnablePrint: "1"
          }
        );
        if (res.code == "10000") {
          this.getNotProList(this.formData);
          this.getYesProList(this.formData);
        } else {
          return false;
        }
      }
    },
    //确认添加未添加的物流商
    async addNotpro() {
      let res = await con_addProList(
        this.searchPlatData.sysStoreHouseId,
        this.formData.sysLogisticsId,
        this.formData.sysLogisticsServiceItemId
      );
      if (res.code == "10000") {
        this.formData.sysLogisticsServiceItemId = undefined;
        this.getNotProList(this.formData);
        this.getYesProList(this.formData);
      }
    },
    //查询未添加的物流商
    async getNotProList(row) {
      let res = await con_searchNotProList(
        this.searchPlatData.sysStoreHouseId,
        row.sysLogisticsId
      );
      if (res.code == "200") {
        this.stsItms = res.responseBody;
      }
    },
    //查询已添加的物流商
    async getYesProList(row) {
      this.spinning = true;
      let res = await con_searchYesProList(
        this.searchPlatData.sysStoreHouseId,
        row.sysLogisticsId
      );
      if (res.code == "200") {
        this.providersData = res.responseBody;
        this.spinning = false;
      }
    },
    //查询表格数据
    async getPlatTabList() {
      this.spinning = true;
      let res = await con_searchPlat(
        this.searchPlatData.sysStoreHouseId,
        this.searchPlatData
      );
      if (res.code == "200") {
        this.platData = res.responseBody.records;
        this.platData.forEach(item => {
          item.key = item.sysLogisticsId;
        });
        this.total = res.responseBody.total * 1;
        this.searchPlatData.size = res.responseBody.size * 1;
        this.logiConfigVisible = true;
        this.spinning = false;
      }
    },
    //分页器事件
    onChangePage(pageNumber) {
      this.searchPlatData.current = pageNumber * 1;
      this.getPlatTabList();
    },
    //页码变更
    showChange(current, size) {
      this.searchPlatData.current = current * 1;
      this.searchPlatData.size = size * 1;
      this.getTabList();
    },
    //关闭模态框
    handleCancel() {
      this.searchPlatData = {
        size: 1,
        current: 10
      };
      this.platData = [];
      this.selectedRowKeys = [];
      this.logiConfigVisible = false;
    },
    //关闭第二层
    handleCancel2() {
      this.stsItms = [];
      this.providersData = [];
      this.formData = {
        sysLogisticsId: undefined,
        sysLogisticsServiceItemId: undefined
      };
      this.logiproVisible = false;
    },
    //确认按钮
    async handleOk(flag) {
      if (flag == "addser") {
        let res = await con_addSerProWay(
          this.searchPlatData.sysStoreHouseId,
          this.addWayData.sysLogisticsId,
          this.addWayData.sysStoreHouseLogisticsServiceItemId,
          this.services
        );
        if (res.code == "10000") {
          this.getNotProList(this.formData);
          this.getYesProList(this.formData);
          this.handleCancel3();
        }
      }
    },
    //平台选择得关联
    async onSelectChange(e, record) {
      let res = await con_logiAddPlat(
        this.searchPlatData.sysStoreHouseId,
        record.sysLogisticsId
      );
      if (res.code == "10000") {
        this.getPlatTabList();
      }
    },

    //物流设置添加物流平台
    serviceConfig(record) {
      this.getNotProList(record);
      this.getYesProList(record);
      this.formData.sysLogisticsId = record.sysLogisticsId;
      this.logiproVisible = true;
    },
    handleCancel3() {
      this.service = false;
      this.plainOptions = [];
      this.services = [];
      this.addserForm = {
        wayName: "",
        isDisable: 1
      };
    }
  }
};
</script>

<style lang="less" scoped>
/deep/.fromData {
  display: flex;
  width: 95%;
  .ant-form-item {
    width: 200px;
    margin-right: 10px;
    .ant-select-selection {
      width: 100%;
    }

    .ant-form-item-control-wrapper {
      width: 100%;
    }
  }
}
</style>
